<html>
<head>
<link rel="stylesheet" type="text/css" href="extensions_toolstrip.css"> 
<style>
body {
  font-family: arial;
  background-color: #DDE9F6;
}

h1 {
  font-size: 14px;
  display: -webkit-box;
}

td, input {
  font-size: 12px;
}

</style>
<script type="text/javascript">

var inPhoneNumber, inPassword, inPollInterval, 
  origPhoneNumber, origPassword, origPollInterval;


function init() {
  inPhoneNumber = document.getElementById('inPhoneNumber');
  inPassword = document.getElementById('inPassword');
  inPollInterval = document.getElementById('inPollInterval');
  if (localStorage.phoneNumber) inPhoneNumber.value = localStorage.phoneNumber;
  if (localStorage.password) inPassword.value = localStorage.password;
  if (localStorage.pollTimeout) inPollInterval.value = localStorage.pollTimeout / 60000;
  origPhoneNumber = inPhoneNumber.value || '';
  origPassword = inPassword.value || '';
  origPollInterval = inPollInterval.value || '';
  console.log('Initialised');
}

function save() {
  var credMod = false;
  if (inPhoneNumber.value != origPhoneNumber) {
    localStorage.phoneNumber = inPhoneNumber.value;
    credMod = true;
  }
  if (inPassword.value != origPassword) {
    localStorage.password = inPassword.value;
    credMod = true;
  }
  var interval = parseInt(inPollInterval.value);
  if (inPollInterval.value != origPollInterval && interval > 0) {
    interval *= 60000;
    localStorage.pollTimeout = interval;
    var bg = chrome.extension.getBackgroundPage();
    if (bg) bg.Yesss.setPollTimeout(interval);
  }
  if (credMod) {
    var bg = chrome.extension.getBackgroundPage();
    if (bg) bg.Yesss.setCredentials(inPhoneNumber.value, inPassword.value);
  }
  window.close();
}

</script>
</head>

<body onload="init();">
  <h1>Account</h1>
  <table>
    <tr>
      <td>Phone&nbsp;number:</td>
      <td><input type="text" id="inPhoneNumber"/></td>
    </tr>
    <tr>
      <td>Password: </td>
      <td><input type="password" id="inPassword"/></td>
    </tr>
    <tr>
      <td>Poll&nbsp;interval&nbsp;(minutes): </td>
      <td><input type="text" id="inPollInterval" value="60" size="1"/></td>
    </tr>
  </table>
  <div id="btnSave" onclick="save();" class="toolstrip-button">
    <img src="save.png" />
    <span>Save</span>
  </div>
</body>
</html>
